<template>
  <div class="c_12">
    <div class="c_fu">
      <div v-text="'父组件自己的值： ' + a"></div>
      <div v-text="'父组件传递给子组件的值： ' + c"></div>
      <div>
        <a-button @click="changeFuValueByFu" type="primary"
          >修改父组件自己的值</a-button
        >
      </div>
      <div>
        <a-button @click="changeSendValueByFu" type="primary"
          >修改父组件传递给子组件的值</a-button
        >
      </div>
      <div>
        <a-button @click="changeZiValueByFu" type="primary"
          >修改子组件自己的值</a-button
        >
      </div>
    </div>
    <div class="c_zi">
      <childtwe
        ref="childtw"
        :valueRomFu="c"
        @changeFuValueFromZi="changeFuValueFromZi"
        @changeSendValueByZi="changeSendValueByZi"
      ></childtwe>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, nextTick } from "vue";
import childtwe from "./demo12_child.vue";

const a = ref<string>("父组件");
const c = ref<string>("传递的值");

const changeFuValueByFu = () => {
  a.value = "父组件改变了自己的值";
};

const changeSendValueByFu = (): void => {
  c.value = "父组件改变了传递给子组件的值";
};

const changeFuValueFromZi = (v: string): void => {
  a.value = v;
};

const changeSendValueByZi = (v: string): void => {
  c.value = v;
};

const childtw = ref<InstanceType<typeof childtwe>>();
const changeZiValueByFu = (): void => {
  nextTick(() => {
    childtw.value?.changeSelfValueByFu("父组件改变了子组件的值");
  });
};
</script>

<style scoped lang="scss">
.c_12 {
  width: 100%;
  .c_fu {
    width: 100%;
    padding: 10px;
    background-color: #2177b8;
    color: #fff;
    div {
      margin-bottom: 10px;
    }
  }
  .c_zi {
    margin-top: 40px;
  }
}
</style>
